<template>
  <div @touchmove.prevent>
    <mt-popup style="width:100%" v-model="popupVisible" position="bottom">
      <mt-picker
        :slots="slots"
        :showToolbar="true"
        valueKey="name"
        @change="onValuesChange"
        ref="addressPicker"
      >
        <div class="ctrl-btn">
          <button @click="popupVisible=false">取消</button>
          <button @click="confirm">确定</button>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup, Picker } from "mint-ui";

Vue.component(Popup.name, Popup);
Vue.component(Picker.name, Picker);

export default {
  name: "addressCmp",
  data() {
    return {
      popupVisible: false,
      index1: 0,
      index2: 0,
      index3: 0,
      slots: [
        {
          flex: 1,
          defaultIndex: 0,
          values: [],
          className: "slot1",
          textAlign: "center",
          value: ""
        },
        {
          divider: true,
          content: "-"
        },
        {
          flex: 1,
          defaultIndex: 0,
          values: [],
          className: "slot2",
          textAlign: "center",
          value: ""
        },
        {
          divider: true,
          content: "-"
        },
        {
          flex: 1,
          defaultIndex: 0,
          values: [],
          className: "slot3",
          textAlign: "center",
          value: ""
        }
      ],
      currentAddress: {}
    };
  },
  props: {
    addressData: {
      type: Array,
      default: () => []
    }
  },
  mounted() {},
  methods: {
    // 初始化地址
    init(data) {
      this.popupVisible = true;
      this.slots[0].values = this.addressData;
      this.slots[2].values = this.getCityArr(data.province);
      this.slots[4].values = this.getDistrictArr(data.province, data.city);

      // this.setDefaultAddress(data.province, data.city, data.district)

      this.$refs.addressPicker.setSlotValue(
        0,
        this.getDataByCode(data.province, this.slots[0].values)
      );
      this.$refs.addressPicker.setSlotValue(
        1,
        this.getDataByCode(data.city, this.slots[2].values)
      );
      this.$refs.addressPicker.setSlotValue(
        2,
        this.getDataByCode(data.district, this.slots[4].values)
      );
    },
    getDataByCode(code, list) {
      let obj = {};
      for (let item of list) {
        if (item.code === code) {
          obj = item;
        }
      }
      // console.log(obj);
      return obj;
    },
    // 设置默认显示地址
    setDefaultAddress(pCode, cCode, dCode) {
      pFor: for (let i = 0; i < this.addressData.length; i++) {
        let p = this.addressData[i];
        if (p.code === pCode) {
          this.slots[2].values = p.children;
          this.slots[0].defaultIndex = i;
          cFor: for (let j = 0; j < p.children.length; j++) {
            let c = p.children[j];
            if (c.code === cCode) {
              this.slots[4].values = c.children;
              this.slots[2].defaultIndex = j;
              dFor: for (let k = 0; k < c.children.length; k++) {
                let d = c.children[k];
                if (d.code === dCode) {
                  this.slots[4].defaultIndex = k;

                  this.$refs.addressPicker.setSlotValue(0, p);
                  this.$refs.addressPicker.setSlotValue(1, c);
                  this.$refs.addressPicker.setSlotValue(2, d);
                  break dFor;
                }
              }
              break cFor;
            }
          }
          break pFor;
        }
      }
    },
    // 切换地址
    onValuesChange(picker, values) {
      this.currentAddress = values;
      console.log(values);
      if (values[0] && values[0].code) {
        let cityArr = this.getCityArr(values[0].code);
        picker.setSlotValues(1, cityArr);
        let regionArr = this.getDistrictArr(values[0].code, values[1].code);
        picker.setSlotValues(2, regionArr);
      }
    },
    // 确定
    confirm() {
      this.$emit("addressEmit", this.currentAddress);
      this.popupVisible = false;
    },
    // 省->市
    getCityArr(pCode) {
      let cArr = [];
      for (let p of this.addressData) {
        if (p.code === pCode) {
          cArr = p.children || [];
        }
      }
      if (cArr.length === 0) {
        cArr = [{ name: "--", code: "111111" }];
      }
      return cArr;
    },
    // 市->区
    getDistrictArr(pCode, cCode) {
      let dArr = [];
      pFor: for (let p of this.addressData) {
        if (p.code === pCode) {
          cFor: for (let c of p.children) {
            if (c.code === cCode) {
              dArr = c.children || [];
              break cFor;
            }
          }
          break pFor;
        }
      }
      if (dArr.length === 0) {
        dArr = [{ name: "--", code: "000000" }];
      }
      return dArr;
    }
  }
};
</script>

<style scoped>
.ctrl-btn {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
button {
  padding: 1rem;
  font-size: 1rem;
}
</style>